<template>
  <div class="activity">
    <div class="label">
      <span>邀请活动设置</span>
    </div>
    <avue-form
      style="margin-top: 20px"
      ref="inviteFormRef"
      :option="invite_option"
      v-model="invite_form"
      @submit="handleSubmit"
    ></avue-form>

    <div class="label">
      <span>轮盘设置</span>
    </div>
    <avue-crud
      ref="spinRef"
      :table-loading="tableLoading"
      v-model="spin_form"
      :option="spin_option"
      @row-save="rowSaveSpin"
      @row-update="rowUpdateSpin"
      :data="spin_data"
    >
    </avue-crud>
    <!-- <div class="label">
      <span>首充活动设置</span>
    </div>
    <avue-crud
      ref="firstDepositRef"
      :table-loading="tableLoading"
      v-model="first_deposit_form"
      :option="first_deposit_option"
      @row-save="rowAddFirstDeposit"
      @row-update="rowUpdateFirstDeposit"
      :data="first_deposit_data"
    >
    </avue-crud> -->
    <div class="label">
      <span>签到设置</span>
    </div>
    <avue-crud
      ref="checkRef"
      :table-loading="tableLoading"
      v-model="check_form"
      :option="check_option"
      @row-update="rowUpdateCheck"
      :data="check_data"
    >
    </avue-crud>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  getCheckConfig,
  getSpinConfig,
  addSpinConfig,
  editSpinConfig,
  // getFirstDepositConfig,
  // addFirstDepositConfig,
  // editFirstDepositConfig,
  getInviteConfig,
  editInviteConfig,
} from "@/apis/admin";
import { ElMessage } from "element-plus";
import { editCheckConfig } from "../apis/admin";

const check_data = ref([]);
const check_option = {
  index: true,
  border: true,
  stripe: true,
  menuAlign: "center",
  loadingText: "加载中...",
  loadingSpinner: "svg",
  loadingSvgViewBox: "-10, -10, 50, 50",
  loadingBackground: "rgba(122, 122, 122, 0.6)",
  labelWidth: 130,
  menuWidth: 120,
  addBtn: false,
  delBtn: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    {
      label: "签到天数",
      prop: "day",
      disabled: true,
    },
    {
      label: "积分",
      prop: "point",
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入积分",
          trigger: "blur",
        },
      ],
    },
  ],
};
const check_form = ref({});

const spin_option = {
  index: true,
  border: true,
  stripe: true,
  menuAlign: "center",
  loadingText: "加载中...",
  loadingSpinner: "svg",
  loadingSvgViewBox: "-10, -10, 50, 50",
  loadingBackground: "rgba(122, 122, 122, 0.6)",
  labelWidth: 130,
  menuWidth: 120,
  delBtn: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    {
      label: "分区奖励",
      prop: "reward",
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入分区奖励",
          trigger: "blur",
        },
      ],
    },
    {
      label: "权重(0-10000)",
      prop: "weight",
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入权重(0-10000)",
          trigger: "blur",
        },
      ],
    },
  ],
};
const spin_data = ref([]);
const spin_form = ref({});
const tableLoading = ref(false);
const invite_option = ref({
  labelWidth: 120,
  column: [
    {
      label: "邀请投注金额",
      prop: "bet",
      span: 8,
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入邀请投注金额",
          trigger: "blur",
        },
      ],
    },
    {
      label: "奖励金额",
      prop: "reward",
      span: 8,
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入奖励金额",
          trigger: "blur",
        },
      ],
    },
    {
      label: "奖励上限",
      prop: "max",
      span: 8,
      type: "number",
      rules: [
        {
          required: true,
          message: "请输入奖励上限",
          trigger: "blur",
        },
      ],
    },
  ],
});
const invite_form = ref({
  bet: 0,
  reward: 0,
  max: 0,
});
const handleSubmit = (form, done) => {
  editInviteConfig
    .post("", {
      bet: Number((form.bet * 100).toFixed(0)),
      reward: Number((form.reward * 100).toFixed(0)),
      max: Number((form.max * 100).toFixed(0)),
    })
    .then((res) => {
      done();
      if (res.code == 200) {
        ElMessage.success("编辑成功");
        getInvite();
      }
    });
};
// const first_deposit_option = {
//   index: true,
//   border: true,
//   stripe: true,
//   menuAlign: "center",
//   loadingText: "加载中...",
//   loadingSpinner: "svg",
//   loadingSvgViewBox: "-10, -10, 50, 50",
//   loadingBackground: "rgba(122, 122, 122, 0.6)",
//   labelWidth: 120,
//   menuWidth: 120,
//   delBtn: false,
//   refreshBtn: false,
//   columnBtn: false,
//   column: [
//     {
//       label: "金额",
//       prop: "amount",
//       type: "number",
//       rules: [
//         {
//           required: true,
//           message: "请输入金额",
//           trigger: "blur",
//         },
//       ],
//     },
//     {
//       label: "赠送金额",
//       prop: "reward",
//       type: "number",
//       rules: [
//         {
//           required: true,
//           message: "请输入赠送金额",
//           trigger: "blur",
//         },
//       ],
//     },
//   ],
// };
// const first_deposit_form = ref({});
// const first_deposit_data = ref([]);
const rowSaveSpin = async (row, done, loading) => {
  if (spin_data.value.length == 12) {
    ElMessage.warning("轮盘设置最多十二条");
    done();
    return;
  }
  const res = await addSpinConfig.post("", {
    ...row,
    reward: Number((row.reward * 100).toFixed(0)),
  });
  if (res.code == 200) {
    done();
    ElMessage.success("添加成功");
    getSpin();
  }
};
const rowUpdateCheck = async (row, index, done, loading) => {
  const param = [];
  check_data.value.map((item) => {
    param.push(item.point);
  });
  param[index] = row.point;
  const res = await editCheckConfig.post("", {
    rewards: param,
  });
  if (res.code == 200) {
    done();
    ElMessage.success("编辑成功");
    getCheck();
  }
};
const rowUpdateSpin = async (row, index, done, loading) => {
  const res = await editSpinConfig.post("", {
    ...row,
    reward: Number((row.reward * 100).toFixed(0)),
  });
  if (res.code == 200) {
    done();
    ElMessage.success("编辑成功");
    getSpin();
  }
};
// const rowAddFirstDeposit = async (row, done, loading) => {
//   if (first_deposit_data.value.length == 3) {
//     ElMessage.warning("首充活动金额设置最多三条");
//     done();
//     return;
//   }
//   const res = await addFirstDepositConfig.post("", {
//     amount: Number((row.amount * 100).toFixed(0)),
//     reward: Number((row.reward * 100).toFixed(0)),
//   });
//   if (res.code == 200) {
//     done();
//     ElMessage.success("添加成功");
//     getFirstDeposit();
//   }
// };
// const rowUpdateFirstDeposit = async (row, index, done, loading) => {
//   const res = await editFirstDepositConfig.post("", {
//     ...row,
//     amount: Number((row.amount * 100).toFixed(0)),
//     reward: Number((row.reward * 100).toFixed(0)),
//   });
//   if (res.code == 200) {
//     done();
//     ElMessage.success("编辑成功");
//     getFirstDeposit();
//   }
// };
const getCheck = () => {
  tableLoading.value = true;
  getCheckConfig.get("", {}).then((res) => {
    if (res.code == 200) {
      tableLoading.value = false;
      const data = [];
      res.data.rewards.map((item, index) => {
        data.push({
          day: index + 1,
          point: item,
        });
      });
      check_data.value = data;
    }
  });
};
const getSpin = () => {
  tableLoading.value = true;
  getSpinConfig.get("", {}).then((res) => {
    tableLoading.value = false;
    if (res.code == 200) {
      res.data.list.map((item) => {
        item.reward = item.reward / 100;
      });
      spin_data.value = res.data.list;
    }
  });
};
// const getFirstDeposit = () => {
//   getFirstDepositConfig.get("", {}).then((res) => {
//     if (res.code == 200) {
//       res.data.list.map((item) => {
//         item.amount = item.amount / 100;
//         item.reward = item.reward / 100;
//       });
//       first_deposit_data.value = res.data.list;
//     }
//   });
// };
const getInvite = () => {
  getInviteConfig.get("", {}).then((res) => {
    if (res.code == 200) {
      for (let i in res.data) {
        res.data[i] = res.data[i] / 100;
      }
      invite_form.value = res.data;
    }
  });
};
onMounted(() => {
  getCheck();
  getSpin();
  // getFirstDeposit();
  getInvite();
});
</script>

<style lang="scss" scoped>
.activity {
  width: 100%;
  .label {
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 15px 20px;
    background-color: #f5f5f5;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
